import { Image, Text, View } from "@tarojs/components";
import React from "react";
import { cookLevelText } from "../../../constants";
import { IFood } from "../../../types";
import "../fluid.scss";

interface FluidListProps {
  data: IFood[];
  onClick?: (data: IFood) => void;
}

export const FluidList = ({ data, onClick }: FluidListProps) => {
  const handleClick = (item: IFood) => {
    onClick?.(item);
  };

  return (
    <>
      <View className="fluid-container">
        {data.map((item) => (
          <View
            key={item.id}
            className="fluid-item"
            onClick={() => handleClick(item)}
          >
            <Image
              mode="widthFix"
              lazyLoad
              fadeIn
              className="fluid-item-image"
              src={item.cover_image}
            />
            <View className="fluid-item-text">
              <Text className="food-name">{item.name}</Text>
              <View className="food-info">
                <View className="flex info">
                  <Text>{item.spend}分钟</Text>
                  <Text>{cookLevelText.get(item.cookLevel)}</Text>
                </View>
              </View>
            </View>
          </View>
        ))}
      </View>
    </>
  );
};
